<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<ng-container *ngIf="resourceType === protectResourceCategory.filesets; else singleSelectedTpl">
    <div class="aui-gutter-column-lg">
        <lv-collapse [lvMultiExpansion]="'false'" lvType="simple">
            <lv-collapse-panel [lvTitle]="collapsePanelTitleTpl" [lvExpanded]="false">
                <lv-tabs [lvActiveIndex]="1" [lvBeforeChange]="beforeChange" class="host-register-tabs">
                    <lv-tab [lvTitle]="tabTotalTitleTpl" [lvId]="0">
                        <ng-template lv-tab-lazy>
                            <ng-container *ngTemplateOutlet="totalTableTpl">
                            </ng-container>
                        </ng-template>
                    </lv-tab>
                    <lv-tab [lvTitle]="tabSelectedTitleTpl" [lvId]="1">
                        <ng-template lv-tab-lazy>
                            <ng-container *ngTemplateOutlet="selectedTableTpl">
                            </ng-container>
                        </ng-template>
                    </lv-tab>
                </lv-tabs>
            </lv-collapse-panel>
        </lv-collapse>
    </div>
</ng-container>

<ng-template #collapsePanelTitleTpl>
    <ng-container *ngTemplateOutlet="selectedTpl"></ng-container>
</ng-template>

<ng-template #singleSelectedTpl>
    <div class="aui-gutter-column-lg">
        <ng-container *ngTemplateOutlet="selectedTpl"></ng-container>
    </div>
</ng-template>

<ng-template #selectedTpl>
    <lv-group lvGutter="8px">
        <span class="aui-h3">
            {{ 'protection_selected_fileset_label' | i18n }}
        </span>
        <span>
            <ng-container *ngIf="resourceType === protectResourceCategory.filesets">
                {{selectionData.length}}
            </ng-container>
            <ng-container *ngIf="resourceType !== protectResourceCategory.filesets">
                {{resourceData.name}}
            </ng-container>
        </span>
    </lv-group>
</ng-template>

<ng-template #tabTotalTitleTpl>
    <div class="host-register-tabnav">
        <span>{{ 'common_total_label'|i18n }}</span>
        <span class="host-register-tabnav-num">{{ total }}</span>
    </div>
</ng-template>

<ng-template #tabSelectedTitleTpl>
    <div class="host-register-tabnav">
        <span>{{ 'common_selected_label'|i18n }}</span>
        <span class="host-register-tabnav-num">{{ selectionData.length }}</span>
    </div>
</ng-template>

<ng-template #totalTableTpl>
    <lv-datatable #lvTable [lvData]="totalTableData" lvSelectionMode="multiple" [(lvSelection)]="selectionData"
        [lvPaginator]="page" lvSize="small" (lvSelectionChange)='selectionChange($event)' lvCompareWith="uuid" lvAsync>
        <thead>
            <tr>
                <th lvShowCheckbox width="64px" [lvRowsData]='lvTable.renderData | selectionPipe'>
                </th>
                <th *ngFor="let col of columns" [lvShowFilter]="col.filter" (lvFilterChange)="filterChange($event)"
                    [(lvFilters)]="col.filterMap" lvCellKey="{{ col.key }}" lvShowCustom lvFilterCheckAll>
                    {{ col.label}}
                    <div lvCustom *ngIf="col.key === 'name'">
                        <i lv-icon="lv-icon-search" [lvColorState]="true" [ngClass]="{ active: !!name }" lv-popover
                            [lvPopoverContent]="nameFilterTpl" lvPopoverTheme="light" lvPopoverPosition="bottom"
                            lvPopoverTrigger="click" #namePopover="lvPopover"></i>
                    </div>
                    <div lvCustom *ngIf="col.key === 'environment_endpoint'">
                        <i lv-icon="lv-icon-search" [lvColorState]="true" [ngClass]="{ active: !!environmentIp }"
                            lv-popover [lvPopoverContent]="environmentIpFilterTpl" lvPopoverTheme="light"
                            lvPopoverPosition="bottom" lvPopoverTrigger="click" #environmentIpPopover="lvPopover"></i>
                    </div>
                </th>
            </tr>
        </thead>
        <tbody>
            <ng-container *ngFor="let item of lvTable.renderData">
                <tr>
                    <td width="64px" lvShowCheckbox [lvRowData]="item" [lvDisabled]='item.sla_id'
                        lv-tooltip="{{item.sla_id ? ('protection_fileset_disable_protection_label' | i18n) : ''}}"></td>
                    <td *ngFor="let col of columns">
                        <ng-container *ngIf="col.key === 'sla_name';else otherTpl">
                            <span lv-overflow>
                                <sla-type [name]="item.sla_name"></sla-type>
                            </span>
                        </ng-container>
                        <ng-template #otherTpl>
                            <span lv-overflow>
                                {{ item[col.key] }}
                            </span>
                        </ng-template>
                    </td>
                </tr>
            </ng-container>
        </tbody>
    </lv-datatable>

    <!-- totalTable分页 -->
    <lv-paginator #page [hidden]="!total" lvMode="simple" [lvPageSize]="pageSize" [lvTotal]="total"
        [lvPageSizeOptions]="sizeOptions" [lvShowPageSizeOptions]='false' [lvPageIndex]="pageIndex"
        (lvPageChange)="pageChange($event)">
    </lv-paginator>
</ng-template>

<ng-template #selectedTableTpl>
    <lv-datatable [lvData]='selectionData' #lvSelectedTable lvSize="small" [lvPaginator]='pageSelected'>
        <thead>
            <tr>
                <th *ngFor="let col of columns" lvCellKey="{{ col.key }}" lvShowCustom>
                    {{ col.label}}
                </th>
                <th width='110px'>{{'common_operation_label' | i18n }}</th>
            </tr>
        </thead>
        <tbody>
            <ng-container *ngFor='let item of lvSelectedTable.renderData'>
                <tr>
                    <td *ngFor="let col of columns">
                        <ng-container *ngIf="col.key === 'sla_name';else other">
                            <span lv-overflow>
                                <sla-type [name]="item.sla_name"></sla-type>
                            </span>
                        </ng-container>
                        <ng-template #other>
                            <span lv-overflow>
                                {{ item[col.key] }}
                            </span>
                        </ng-template>
                    </td>
                    <td width='110px'>
                        <lv-operation-menu [lvItemsFn]="optsCallback" [lvData]="item"></lv-operation-menu>
                    </td>
                </tr>
            </ng-container>
        </tbody>
    </lv-datatable>
    <lv-paginator #pageSelected lvMode="simple" [lvShowPageSizeOptions]='false'></lv-paginator>
</ng-template>

<ng-template #nameFilterTpl>
    <lv-search [(ngModel)]="name" (lvSearch)="searchByName($event)" [lvFocus]="true"></lv-search>
</ng-template>

<ng-template #environmentIpFilterTpl>
    <lv-search [(ngModel)]="environmentIp" (lvSearch)="searchByEnvironmentIp($event)" [lvFocus]="true"></lv-search>
</ng-template>